<template>
  <el-container>
    <el-header  >
      <el-row class="bgCo1">
        <el-col :span="6">
          <div class="bg-dark">
            <span class="title">网上服务</span>
          </div>
        </el-col>
        <el-col :span="6" :offset="3">
          <div class="bg-dark">
              <el-input placeholder="请输入内容" >
                <el-button  class="input-with-select" slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
        </el-col>
        <!-- <el-col :span="6" :offset="3">
          <div class="bg-dark">
            <el-button  icon="el-icon-user-solid">
              <el-link type="primary">登录</el-link>
              <el-link type="primary">注册</el-link>
            </el-button>
          </div>
        </el-col> -->
      </el-row>
      <el-row>
        <el-col >
          <div class="braed">
            <el-link><span class="br">首页</span></el-link>
            |
            <el-link @click="onclick"><span class="br">上门维修</span></el-link>
            |
            <el-link><span class="br">衣物洗护</span></el-link>
            |
            <el-link><span class="br">跑腿服务</span></el-link>
            |
            <el-link><span class="br">搬家服务</span></el-link>
            |
            <el-link><span class="br">家政服务</span></el-link>

          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <div class="lunbo" >
        <el-carousel :interval="4000" type="card" height="440px" >
          <!-- <el-carousel-item v-for="item in top3Goods" :key="item.id"> -->
          <el-carousel-item >
            <div class="bgCo1">
             <!-- <img src="../../static/1.jpg"/>
              <img src="../../static/2.jpg"/>
              <img src="../../static/3.jpg"/>
              <img src="../../static/3.jpg"/> -->
              <el-image src="../../static/1.jpg"></el-image>
            </div>
          </el-carousel-item>
          <el-carousel-item >
            <div class="bgCo1">
              <el-image src="../../static/2.jpg"></el-image>
            </div>
          </el-carousel-item>
          <el-carousel-item >
            <div class="bgCo1">
              <el-image src="../../static/3.jpg"></el-image>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="recommend">
        <div class="recommend-title">推荐商品</div>
        <div>
          <el-row>
           <!-- <el-col :span="3" v-for="(item, index) in topGoods" :key="item.id" :offset='2'>
              <el-card :body-style="{ padding: '0px',height:'290px'}" class="card">
                <el-image :src="item.picturesurl" fit="fill" class="image"></el-image>
                <div style="padding: 14px;">
                  <span>{{item.title}}:¥{{item.price}}</span>
                  <div class="">
                    <el-button type="text" class="button" @click="jumpGoodsDetail(item.id)">查看详情</el-button>
                  </div>
                </div>
              </el-card>
            </el-col> -->
            <el-col offset='2' style="width: 180px;">
              <el-card :body-style="{ padding: '0px',height:'290px',width: '180px'}" class="card">
                <el-image src="../../static/4.jpg" fit="fill" class="image"></el-image>
                <div style="padding: 14px;">
                  <span>title:¥100</span>
                  <div class="">
                    <el-button type="text" class="button" @click="jumpGoodsDetail()">查看详情</el-button>
                  </div>
                </div>
              </el-card>

            </el-col>
            <el-col offset='2' style="width: 180px;">
              <el-card :body-style="{ padding: '0px',height:'290px',width: '180px'}" class="card">
                <el-image src="../../static/4.jpg" fit="fill" class="image"></el-image>
                <div style="padding: 14px;">
                  <span>title:¥100</span>
                  <div class="">
                    <el-button type="text" class="button" @click="jumpGoodsDetail(item.id)">查看详情</el-button>
                  </div>
                </div>
              </el-card>

            </el-col>
            <el-col offset='2' style="width: 180px;">
              <el-card :body-style="{ padding: '0px',height:'290px',width: '180px'}" class="card">
                <el-image src="../../static/4.jpg" fit="fill" class="image"></el-image>
                <div style="padding: 14px;">
                  <span>title:¥100</span>
                  <div class="">
                    <el-button type="text" class="button" @click="jumpGoodsDetail(item.id)">查看详情</el-button>
                  </div>
                </div>
              </el-card>

            </el-col>

            <el-col offset='2' style="width: 180px;">
              <el-card :body-style="{ padding: '0px',height:'290px',width: '180px'}" class="card">
                <el-image src="../../static/4.jpg" fit="fill" class="image"></el-image>
                <div style="padding: 14px;">
                  <span>title:¥100</span>
                  <div class="">
                    <el-button type="text" class="button" @click="jumpGoodsDetail(item.id)">查看详情</el-button>
                  </div>
                </div>
              </el-card>

            </el-col>
            <el-col offset='2' style="width: 180px;">
              <el-card :body-style="{ padding: '0px',height:'290px',width: '180px'}" class="card">
                <el-image src="../../static/4.jpg" fit="fill" class="image"></el-image>
                <div style="padding: 14px;">
                  <span>title:¥100</span>
                  <div class="">
                    <el-button type="text" class="button" @click="jumpGoodsDetail(item.id)">查看详情</el-button>
                  </div>
                </div>
              </el-card>

            </el-col>
            <el-col offset='2' style="width: 180px;">
              <el-card :body-style="{ padding: '0px',height:'290px',width: '180px'}" class="card">
                <el-image src="../../static/4.jpg" fit="fill" class="image"></el-image>
                <div style="padding: 14px;">
                  <span>title:¥100</span>
                  <div class="">
                    <el-button type="text" class="button" @click="jumpGoodsDetail(item.id)">查看详情</el-button>
                  </div>
                </div>
              </el-card>

            </el-col>
            <el-col offset='2' style="width: 180px;">
              <el-card :body-style="{ padding: '0px',height:'290px',width: '180px'}" class="card">
                <el-image src="../../static/4.jpg" fit="fill" class="image"></el-image>
                <div style="padding: 14px;">
                  <span>title:¥100</span>
                  <div class="">
                    <el-button type="text" class="button" @click="jumpGoodsDetail(item.id)">查看详情</el-button>
                  </div>
                </div>
              </el-card>

            </el-col>
            <el-col offset='2' style="width: 180px;">
              <el-card :body-style="{ padding: '0px',height:'290px',width: '180px'}" class="card">
                <el-image src="../../static/4.jpg" fit="fill" class="image"></el-image>
                <div style="padding: 14px;">
                  <span>title:¥100</span>
                  <div class="">
                    <el-button type="text" class="button" @click="jumpGoodsDetail(item.id)">查看详情</el-button>
                  </div>
                </div>
              </el-card>

            </el-col>




          </el-row>
        </div>
      </div>
    </el-main>
    <!-- <el-footer>
      <div class="footer">
        <div>关于我们</div>
        <div>团队信息</div>
      </div>

    </el-footer> -->
  </el-container>

</template>

<script>

  // import {Notification} from "element-ui";
    export default {
      name: "Index",
      data(){
        return{
          top3Goods:[],
          topGoods:[],
        }
      },
      methods:{
        onclick(){
          this.$router.push("/addGoods");
        },
        load(){
          this.getTop3Goods();
          this.getTopGoods();
        },
        getTop3Goods(){
          let _this=this;
          this.$axios.get("/goods/getTopGoods?number="+'3').then(res=>{
            if (res.returnCode!='0'){
              _this.errorAlert("服务器错误");
              return;
            };
            let list=res.beans;
            _this.top3Goods=list;
          });
        },
        //获取分页数据
        getTopGoods(){
          let _this=this;
          this.$axios.get("/goods/getTopGoods").then(res=>{
            if (res.returnCode!='0'){
              _this.errorAlert("服务器错误");
              return;
            };
            let list=res.beans;
            _this.topGoods=list;
          });
        },
        //跳转详情
        jumpGoodsDetail(){
          
          this.$router.push("/goodsDetail");
        },
        //错误提示框
        errorAlert(message) {
          Notification.error({
            title: '错误',
            message: message,
            customClass:'custom-error'
          })
        },
        //成功提示框
        successAlert(message){
          Notification.success({
            title:'成功',
            message:''
          })
        }
      },
      mounted() {
        this.load();
      }
    }
</script>
<style>
  .el-header, .el-footer {
    color: #333;
    text-align: center;
  }
  .bg-dark{
    margin-top: 15px;
    height: 50px;
  }

  .title{
    font-size: 20px;
    line-height: 50px;
  }
  .input-with-select{

  }
  .el-carousel{
    margin-top: 150px;
  }
  .recommend{
    border: solid 1px gainsboro;
    box-shadow: -3px -3px 5px #999;
    text-align: center;
  }
  .recommend-title{
    margin-top: 10px;
    font-size: 20px;
  }
  .braed{
    margin-top: 20px;
    height: 20px;
  }
  .br{
    font-size: 20px;
  }
  .recommend-product{
    border: solid 1px gainsboro;

    width: 200px;
    height: 300px;
  }
  .image {
    height: 180px;
    width: 180px;

    display: block;
  }
  .card{
    margin-top: 10px;
  }
  /*-----------------------------------------------------------------------*/


  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .bgCo1{
    background-color: rgb(92,167,186);
  }
  .bgCo2{
    background-color: rgb(175,215,237);
  }
  .bgCo3{
    background-color: rgb(147,224,255);
  }
  .baCo4{
    background-color: rgb(255,66,93);
  }
  .bgCo5{
    background-color: rgb(199,237,233);
  }
  .bgCo6{
    background-color: rgb(237, 242, 245);
  }
  .bgCo7{
    background-color: rgb(251, 250, 243);
  }

</style>
